  <!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/common/common/common.js"></script>
  <style>
    li{
      list-style: none;
    }
    a{
      text-decoration: none;
    }
    /*修改标题栏颜色*/
    .bar.bar-nav {
      background-color: #1FCA23;
    }

    /*修改标题栏字体颜色*/
    .bar.bar-nav .title {
      color: #fff;
    }
    
    /*修改工具栏背景颜色*/
    .bar.bar-tab {
      background-color: #FEEA4D;
    }
    #pull-left{
      display:inline-block;
      width: 1.5rem;
      padding-top:0.3rem;
      float: left;
    }
    #pull-left img{
      display: block;
      width: 100%;
    }
    #pull-title{
      display: inline-block;
      width: 8.0rem;
      height: 2.2rem;
      line-height: 2.2rem;
      /* float: left; */
      margin-left: 30%;
      color: #fff;
      font-size: 16px;
      margin-left: calc(50% - 1.5rem - 4rem);
      text-align: center; 
    }
    /*修改内容区背景色*/
    body{
      background-color:#fff;
    }
    .content{
      background-color: #fff;
    }
    .menu{
      width: 100%;
      height:2.2rem;
      background-color:#fff;
      border-bottom: 1px solid rgb(236, 236, 236);
      font-size: 14px;
      float: top;
      z-index: 300;
      position: relative;
      top:2.27rem;
      left: 0;
    }
    .menu_name{
      width: 50%;
      height: 2.2rem;
      line-height: 2.2rem;
      float: left;
      /*margin-left:9%;*/
      text-align:center;
    }
    .menu_subject{
      width: 50%;
      height: 2.2rem;
      line-height: 2.2rem;
      float: left;
      text-align:center;
    }
    /*.menu_learn{
      width: 0%;
      height: 2.2rem;
      line-height: 2.2rem;
      float: left;
      text-align:left;
    }*/

    .study_main{
      width: 100%;
      height: auto;
      float: left;
    }
    .study_main ul{
      margin:0;
      padding:0;
    }
    .study_main ul li{
      padding:0.5rem 0.5rem 0 1.2rem;
      border-bottom: 1px solid rgb(236, 236, 236);
      position: relative;
    }
    .main_items{
      font-size: 14px;
      color: #1FCA23;
    }
    .main_items span:last-child{
      margin-left:0.9rem;
    }
    .study_main ul li p{
      font-size: 12px;
      color: gray;
    }
    .main_icon{
      width: 2.0rem;
      position: absolute;
      top:1.1rem;
      right: 0;
    }
    .main_icon img{
      display: block;
      width: 100%;
    }
    #main{
       position:absolute;
       top:2.72rem;
    }
    /*点击小孩姓名显示的下拉页面*/
   #childshow{
     width: 100%;
     height: auto;
     background-color:#fff;
     position: absolute;
     left: 0;
     top:4.45rem;
     z-index: 600;
     display: none;
   }
   #childshow>ul{
    width: 82%;
    height: 100%;
    margin:0 auto;
    padding:0;
    padding-bottom:0.4rem;
   }
   #childshow>ul li{
    width: 100%;
    height: 2.0rem;
    line-height:2.0rem;
    border-bottom: solid 1px rgb(236, 236, 236);
    text-align: center;
   }
   #childshow>ul li a{
    color:black;
    font-size: 14px;
    text-align: left;
   }
   /*点击学科分类显示的下拉页面*/
   #subshow{
     width: 100%;
     height: auto;
     background-color:#fff;
     position: absolute;
     left: 0;
     top:4.45rem;
     z-index: 600;
     display: none;
   }
   #subshow>ul{
    width: 82%;
    height: 100%;
    margin:0 auto;
    padding:0;
    padding-bottom:0.4rem;
   }
   #subshow>ul li{
    width: 100%;
    height: 2.0rem;
    line-height:2.0rem;
    text-align: center;
    border-bottom: solid 1px rgb(236, 236, 236);
   }
   #subshow>ul li a{
    color:black;
    font-size: 14px;
    text-align: left;
   }
   /*点击学习类型显示的下拉页面*/
   #learnshow{
     width: 100%;
     height: auto;
     background-color:#fff;
     position: absolute;
     left: 0;
     top:4.45rem;
     z-index: 600;
     display: none;
   }
   #learnshow>ul{
    width: 82%;
    height: 100%;
    margin:0 auto;
    padding:0;
    padding-bottom:0.4rem;
   }
   #learnshow>ul li{
    width: 100%;
    height: 2.0rem;
    line-height:2.0rem;
    text-align: center;
    border-bottom: solid 1px rgb(236, 236, 236);
   }
   #learnshow>ul li a{
    color:black;
    font-size: 14px;
    text-align: left;
   }
    /*遮罩层效果*/
    #shade{
    width:100%;
    background:rgba(0,0,0,0.3);
    z-index: 100;
    position: absolute;
    bottom: 0;
    z-index:10;
    display: none;
  }
  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">
      <!-- 标题栏 -->
      <header class="bar bar-nav">
         <a href="#" id="pull-left" onclick="backclick()"><img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/back@2x.png"></a>
         <span id="pull-title">学习情况</span>
      </header>
            
      <!-- 主题内容部分 -->
      <div class="menu">
          <div class="menu_name">
             <span onclick="childshow()" id="childtab">自己</span>
             <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png">
          </div>
          <div class="menu_subject">
            <span onclick="subshow()" id="project">全部学科</span>
            <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png">
          </div>
          <!-- <div class="menu_learn">
            <span onclick="learnshow()" id="learn">学习类型</span>
            <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png">
          </div> -->
      </div>
      <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" id="main">
          <div class="list-block" id="li_block">
              <div class="study_main">
               <ul class="list-container" >
                
               </ul>
          </div>
          </div>
          
          <!-- 加载提示符 -->
          <div class="infinite-scroll-preloader">
              <div class="preloader"></div>
          </div>
      </div>

       <!-- 点击小孩姓名显示的下拉页面 -->
       <div id="childshow">
         <ul>
           <!-- <li><a href="#">提莫</a></li>
           <li><a href="#">凯特琳</a></li>
           <li><a href="#">薇恩</a></li> -->
         </ul>
       </div>
       <!-- 点击学科分类显示的下拉页面 -->
       <div id="subshow">
         <ul>
           <!-- <li><a href="#">英语</a></li>
           <li><a href="#">数学</a></li>
           <li><a href="#">语文</a></li> -->
         </ul>
       </div>
       <!-- 点击学习类型显示的下拉页面 -->
       <div id="learnshow" hidden>
         <ul>
           <li><a href="#">全部</a></li>
           <li><a href="#">播放学习</a></li>
           <li><a href="#">跟读学习</a></li>
         </ul>
       </div>

       <!--遮罩效果 -->
        <div id="shade" onclick="bodyclick()">
        
        </div>

    </div>
  </div>

  <!-- !-- 固定的js引用，所有的jQuery 要用 $$ 表示 --> 
<script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/CommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/swiper/swiper.min.js"></script>
<script type="text/javascript">

   // 点击返回
   function backclick(){
     native_goto('local/finish');
   }

    // 加载flag
      var loading = false;
      var offset = 0;
      var limit = 10;
      var lastlength = 10;
      var datalist = new Array();
      var selectstuid = -1;
      var selectprojectid = -1;
      // 设置学习类型默认索引值
      var  classify = 0;
      var isdeletebottom = false;
      var isloadeddata = false;

      // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {

          // 如果正在加载，则退出
          if (loading) return;

          // 设置flag
          loading = true;

          // 模拟1s的加载过程
          setTimeout(function() {
              // 重置加载flag
              loading = false;
              console.log('================'+lastlength + '====' + limit);


              if (lastlength < limit) {

                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  isdeletebottom = true;
                  // 删除加载提示符
                  // $('.infinite-scroll-preloader').remove();
                  return;
              }
               offset = datalist.length;
               getData();
              // 添加新条目
              // addItems(itemsPerLoad, lastIndex);
              // 更新最后加载的序号
              //容器发生改变,如果是js滚动，需要刷新滚动
              $.refreshScroller();
          }, 1000);
      });

  // 点击小孩姓名显示的下拉页面
  function childshow(){
    
    // 点击出现遮罩效果
    var docheight = $$('.infinite-scroll-bottom').height(); 
    $$('#shade').show();
    $$("#shade").css({ "height": docheight });


    if ($$('#childshow').is(':hidden')) {
        $$('.menu_name').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
        $$('#childshow').show();
        $$('#subshow').hide();
        $$('#learnshow').hide();

    }else{
        $$('.menu_name').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
        $$('#childshow').hide();
        $$('#shade').hide();
    }
  }
  // 点击学科分类显示的下拉页面
  function subshow(){

    // 点击出现遮罩效果
    var docheight = $$('.infinite-scroll-bottom').height(); 
    $$('#shade').show();
    $$("#shade").css({ "height": docheight });

    if ($$('#subshow').is(':hidden')) {
        $$('.menu_subject').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
        $$('#subshow').show();
        $$('#childshow').hide();
        $$('#learnshow').hide();
    }else{
        $$('.menu_subject').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
        $$('#subshow').hide();
        $$('#shade').hide();
    }
  }
  
  // 点击学习类型显示的下拉页面
  function learnshow(){

    // 点击出现遮罩效果
    var docheight = $$('.infinite-scroll-bottom').height(); 
    $$('#shade').show();
    $$("#shade").css({ "height": docheight });

    if ($$('#learnshow').is(':hidden')) {
        $$('.menu_learn').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
        $$('#learnshow').show();
        $$('#childshow').hide();
        $$('#subshow').hide();
    }else{
        $$('.menu_learn').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
        $$('#learnshow').hide();
        $$('#shade').hide();
    }

    // 点击learnshow下面的a标签隐藏下拉框
    $$('#learnshow ul li').click(function(){
        $$('#learnshow').hide();
        $$('#shade').hide();
        // 获取当前值赋值
        var text = $$(this).text();
        $$('#learn').text(text);

        // 获取当前索引值
        classify = $$(this).index();

        // 上下图标的指向相应更改
        if ($$('#learnshow').is(':hidden')) {
            $$('.menu_learn').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
        }else{
            $$('.menu_learn').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
        }


      if(isdeletebottom){
          isdeletebottom = false;
          $$("#main").append('<div class="infinite-scroll-preloader" id="placeholder"><div class="preloader"></div></div>');

          $.attachInfiniteScroll($('.infinite-scroll'))
        }

         offset = 0;
        getData();
    });

  }

  
  // 点击遮罩层隐藏div
  function bodyclick(){
     $$('#childshow').hide();
     $$('#subshow').hide();
     $$('#learnshow').hide();
     $$('#shade').hide();
  }


  // 遍历数据 页面内容    
  function getData(){
    var param = {}
    var url = 'api/v1/learn_tests?';
    var paramsnum  = 0;

    if (classify != 0) {
      paramsnum = paramsnum + 1;
    }
    if(selectstuid != -1){
      paramsnum = paramsnum + 1;
    }
    if(selectprojectid != -1){
      paramsnum = paramsnum + 1;
    }

    if(paramsnum>0){
      url += 'search=';
    }

    if (classify == 1) {
       // if(paramsnum == 1){
       //    url += 'is_listen_test:1';
       // }else{
       //    url += 'is_listen_test:1;';
       // }
       url += 'is_listen_test:1;';
    }else if(classify == 2){
       // if(paramsnum == 1){
       //    url += 'is_listen_test:0';
       // }else{
       //    url += 'is_listen_test:0;';
       // }
       url += 'is_listen_test:0;';
    }else{
       url += '';
    }
    

    if(selectstuid != -1){
      // if(paramsnum == 1){
      //     url += 'user_id:'+selectstuid;
      //  }else if(paramsnum == 2){
      //     url += 'user_id:'+selectstuid;
      //  }else{
      //     url += 'user_id:'+selectstuid + ';';
      //  }
      url += 'user_id:'+selectstuid + ';';
    }


    if(selectprojectid != -1){
      url += 'category_id:'+selectprojectid+';';
    }


    if(paramsnum > 0){
      url = url.substring(0,url.length-1);
    }
    if(paramsnum > 1){
      url += '&searchJoin=and';
    }
  
    if(paramsnum > 0){
      url += '&offset='+offset+'&limit='+limit+'&orderBy=updated_at&sortedBy=desc';
    }else{
      url += 'offset='+offset+'&limit='+limit+'&orderBy=updated_at&sortedBy=desc';
    }
    
    net_request('get',url,param,successCallBack,errorCallBack);
  }

  // 遍历数据 小孩
  function userinfo(){
    var param = {}
    var url = 'apis/userinfo';
    net_request('get',url,param,userinfoSuccessCallBack,errorCallBack);
  }

  // 遍历数据 学科
  function getSubject(){
    var param = {}
    var url = 'apis/category';
    net_request('get',url,param,SubjectSuccessCallBack,errorCallBack);
  }

  //成功函数回调 页面
  function successCallBack(data){

    // <li class="item-content" id="imli"><div class="item-inner" id="it_iner"><div class="item-title"><img  src="' + item.img + '"><span>' + item.name + '</span></div></div></li>
    if (isNotNull(data) && data.success) {
      var databody = data.data;
      if (offset == 0) {
        datalist = new Array();
      }
      if (isNotNull(databody)) {
         var list = databody.list;
         if (isNotNull(list)) {
           var html = '';
           lastlength = list.length;
           for (var i = 0; i < list.length; i++) {
              var item = list[i];
              datalist.push(item);
           }
            for (var i = 0; i < datalist.length; i++) {
                  var item = datalist[i];
                  if (isNotNull(item)) {
                    var learntime = Number(item.duration);
                    var learntimestr = formatSeconds(learntime);

                    if(item.is_listen_test == 0){

                      html += '<li index = "'+i+'" onclick="bookclick(this)" id="imli"><h5 style="margin:0;">' + item.section + '</h5><div class="main_items"><span>测试得分：' + item.point + '</span><span>学习时长：' + learntimestr + '</span></div><p>' + item.begin_at + '~' + item.end_at + '</p><div class="main_icon"><img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png"></div></li>';
                    }else{
                      html += '<li index = "'+i+'" onclick="bookclick(this)" id="imli"><h5 style="margin:0;">' + item.section + '</h5><div class="main_items"><span>学习时长：' + learntimestr + '</span><span></span></div><p>' + item.begin_at + '~' + item.end_at + '</p><div class="main_icon"><img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png"></div></li>';
                    }
                  }           
            }
         }

           if(datalist.length == 0){
              html = "";
           }
           $$('.study_main ul').html(html);     
      }

      if (lastlength < limit || datalist.length == 0) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));

                  // 删除加载提示符
                  $('.infinite-scroll-preloader').remove();
                  isdeletebottom = true;
      }
    }
  }

  //点击学习情况里面的科目
  function bookclick(cthis){
    var cindex = Number($$(cthis).attr("index"));
    var cid = datalist[cindex].id;
    native_goto("local/study_details?cid="+cid);
  }
  
  // 成功函数回调 小孩
  function userinfoSuccessCallBack(data){

    //调用页面内容
    
    getSubject();
    
    if (isNotNull(data) && data.success) {
         var databody = data.data;
         if (isNotNull(databody)) {
           var datastu = databody.students;
           if (isNotNull(datastu)) {
             var html = '<li class="child" cid = "-1" ><a href = "">自己</a></li>';
             for (var i = 0; i < datastu.length; i++) {
                  var item = datastu[i];
                  if (isNotNull(item)) {
                    html += '<li class="child" cid = "'+i+'" ><a href = "">'+ item.name +'</a></li>'
                  }
             }
           }
             $$('#childshow ul').html(html);

         }

    }
     $$('#childtab').html("自己");
     // 点击child事件
     $$('.child').click(function(){
        // 隐藏div
        $$('#shade').hide();
        $$('#childshow').hide();
        var text = $$(this).text();
        // 当前值赋值给小孩姓名按钮
        $$('#childtab').html(text);

         // 上下图标的指向相应更改
        if ($$('#childshow').is(':hidden')) {
            $$('.menu_name').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
        }else{
            $$('.menu_name').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
        }
        
        var cid = Number($$(this).attr("cid"));
        if (cid === -1) {
          selectstuid = curuserid;
        }else{
          selectstuid = datastu[cid].id;
        }


        if(isdeletebottom){
          isdeletebottom = false;
          $$("#main").append('<div class="infinite-scroll-preloader" id="placeholder"><div class="preloader"></div></div>');

          $.attachInfiniteScroll($('.infinite-scroll'))
        }

        offset = 0;
        getData();
     });

  }

  //成功函数回调 学科
  function SubjectSuccessCallBack(data){

    //调用页面内容
    getData();

   // console.log(JSON.stringify(data));
   if (isNotNull(data)) {
     var databody = data.data;

     if (isNotNull(databody)) {
      var html = '<li class="subject" cid = "-1" ><a href = "">全部学科</a></li>';

      for (var i = 0; i < databody.length; i++) {
         var item = databody[i];
         if (isNotNull(item)) {
          html += '<li class="subject" cid = "'+i+'"><a href = "">'+item.name+'</a></li>'
         }
      }
     }
        $$('#subshow ul').html(html);
   }

      $$('#project').html("全部学科");
        // 点击subject事件
       $$('.subject').click(function(){
          // 隐藏div
          $$('#shade').hide();
          $$('#subshow').hide();
          var text = $$(this).text();
          // 当前值赋值给学科分类按钮
          $$('#project').html(text);

          // 上下图标的指向相应更改
          if ($$('#subshow').is(':hidden')) {
              $$('.menu_subject').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
          }else{
              $$('.menu_subject').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
          }
          
          var cid = Number($$(this).attr("cid"));
          if (cid === -1) {
            selectprojectid = cid;
          }else{
            selectprojectid = databody[cid].id;
          }


          if(isdeletebottom){
          isdeletebottom = false;
          $$("#main").append('<div class="infinite-scroll-preloader" id="placeholder"><div class="preloader"></div></div>');

          $.attachInfiniteScroll($('.infinite-scroll'))
        }

           offset = 0;
          getData();
       });
       
  }

  function errorCallBack(data){
   console.log(JSON.stringify(data));
  }


  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     /*var jodata = JSON.parse(data); 
     if(isNotNull(jodata)){//
        
     }*/
     if(!isloadeddata){

      if (identity == 0) {
          // 学生
          // $$('.menu_name').hide();
          // $$('.menu_subject').css({'margin-left':'9%'});
          // $$('.menu_learn').css({'margin-left':'31%'});      

          $$('.menu_name').hide();
          $$('.menu_subject').css({'width':'100%'});
          $$('.menu_subject').css({'margin-left':'0%'});
          $$('.menu_subject').css({'text-align':'center'});
          $$('#subshow ul li a').css({'text-align':'center'});
       }
       selectstuid = curuserid;
       userinfo();

       isloadeddata = true;
     }
       

  }
    // 初始化
    $(function(){
       

           
      $.init();
    });
  </script>
</body>
</html>